<template>
  <div class="app">
    <van-swipe @change="onChange" :style="{ height: h }" class="lunbo">
      <van-swipe-item>
        <img :src="'http://127.0.0.1:3000' + `${goods.productphoto}`" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="'http://127.0.0.1:3000' + `${goods.productphoto1}`" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="'http://127.0.0.1:3000' + `${goods.productphoto2}`" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="'http://127.0.0.1:3000' + `${goods.productphoto3}`" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="'http://127.0.0.1:3000' + `${goods.productphoto4}`" alt="" />
      </van-swipe-item>
      <div class="custom-indicator" slot="indicator">{{ current + 1 }}/5</div>
    </van-swipe>
    <router-link to="/product">
      <div class="back">
        <img src="../assets/返回.svg" alt="" />
      </div>
    </router-link>
    <router-link to="/cart">
      <div class="cart">
        <img src="../assets/购物车.svg" alt="" />
      </div>
    </router-link>
    <div class="detail">
      <div class="price">
        <span class="p1">￥</span>
        <span class="p2">{{ goods.productprice }}</span>
      </div>
      <div class="shop">
        <span>天猫</span>
      </div>
      <div class="market">
        <span>月销{{ goods.market }}</span>
      </div>
      <p class="title">{{ goods.productdesc }}</p>
    </div>
    <!-- 商品规格、参数、保障 -->
    <div class="detail">
      <van-cell is-link @click="showPopup1">
        <span style="color: #999">选择</span>
        <span style="margin-left: 10px">商品</span>
      </van-cell>
      <van-popup
        v-model="show"
        position="bottom"
        closeable
        close-icon="close"
        duration="0.2"
        round
        :style="{ height: '80%' }"
      >
        <div style="width: 150px; margin-top: 20px">
          <img
            style="width: 100%"
            :src="'http://127.0.0.1:3000' + `${goods.productphoto}`"
            alt=""
          />
        </div>
        <div style="width: 100px" class="count">
          <div>
            <span>¥</span>
            <span>{{ goods.productprice }}</span>
          </div>
          <div class="countS2">
            <span>库存：</span>
            <span>{{ goods.stock }}</span>
          </div>
        </div>
        <!-- 分割线 -->
        <van-divider :style="{ borderColor: '#999' }" class="xian" />
        <div class="buyBox">
          <span>购买数量</span>
          <van-stepper class="counter" v-model="buy" min="1" max="8" />
        </div>
        <van-goods-action>
          <van-goods-action-button
            type="warning"
            text="加入购物车"
            @click="onClickButton('PLUS')"
          />
          <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="onClickBuy"
          />
        </van-goods-action>
      </van-popup>
      <van-cell is-link>
        <span style="color: #999">发货</span>
        <span
          style="
            margin-left: 10px;
            border-right: 1px solid #999;
            padding-right: 10px;
          "
          >北京</span
        >
        <span style="margin-left: 10px">快递：15:00</span>
        <p style="color: #999; margin: 0px; margin-left: 40px">
          配送至：济南市 历下区
        </p>
      </van-cell>
      <van-cell is-link @click="showPopup3">
        <span style="color: #999; margin-right: 10px">保障</span>
        <span>假一赔四·极速退款·七天无理由退换</span>
      </van-cell>
      <van-popup
        v-model="show3"
        round
        position="bottom"
        closeable
        close-icon="close"
        duration="0.2"
        :style="{ height: '80%' }"
      >
        <div>
          <h4>基础服务</h4>
        </div>
        <div class="securityBox">
          <div class="security">
            <img style="width: 15px" src="../assets/200.png" alt="" />
            <span>假一赔四</span>
          </div>
          <p style="margin: 0px; text-align: left; margin-left: 35px">
            正品保障，假一赔四
          </p>
          <div class="security">
            <img style="width: 15px" src="../assets/200.png" alt="" />
            <span>极速退款</span>
          </div>
          <p style="margin: 0px; text-align: left; margin-left: 35px">
            满足相应条件时，诚信用户在退货寄出后，享受极速退款到账
          </p>
          <div class="security">
            <img style="width: 15px" src="../assets/200.png" alt="" />
            <span>七天无理由退换</span>
          </div>
          <p style="margin: 0px; text-align: left; margin-left: 35px">
            满足相应条件时，消费者可申请 “七天无理由退换货”
          </p>
          <button class="Btn1" @click="showPopup3_1">完成</button>
        </div>
      </van-popup>
      <van-cell is-link @click="showPopup4">
        <span style="color: #999; margin-right: 10px">参数</span>
        <span>品牌 货号</span>
      </van-cell>
      <van-popup
        v-model="show4"
        round
        position="bottom"
        closeable
        close-icon="close"
        duration="0.2"
        :style="{ height: '80%' }"
      >
        <h4>产品参数</h4>
        <div class="parameter">
          <div>
            <span style="margin: 0px 10px 20px 10px">品牌</span>
            <span>冬奥会</span>
          </div>
          <div style="margin-top: 20px">
            <span style="margin: 0px 10px 20px 10px">货号</span>
            <span>6936068581608</span>
          </div>
          <button class="Btn2" @click="showPopup4_1">完成</button>
        </div>
      </van-popup>
    </div>
    <!-- 评价 -->
    <div class="evaluation">
      <div>
        <div class="baby_evaluation">
          <div class="baby_evaluation_1">
            <span>宝贝评价({{ goods.evaluate }})</span>
          </div>
          <div class="all">
            <span>查看全部</span>
            <img width="10px" src="../assets/更多.svg" alt="" />
          </div>
        </div>
        <div class="product_eva">
          <div>外形很好看(8)</div>
          <div>卖家包装到位(4)</div>
          <div>做工精细(4)</div>
        </div>
        <div>
          <div class="buyer">
            <img
              class="buyerTou"
              width="50px"
              src="../assets/logo.png"
              alt=""
            />
            <div>
              <div class="buyer_name">
                <span>l**r</span>
                <img height="16px" src="../assets/VIP.png" alt="" />
              </div>
              <div class="buyer_time">
                <span>8天前</span>
              </div>
            </div>
          </div>
          <div class="buyer_text">
            <p>好看</p>
          </div>
          <div>
            <img src="../assets/buyer.webp" alt="" />
          </div>
        </div>
        <div style="width: 95%; margin: auto">
          <van-divider />
        </div>
      </div>
    </div>
    <!-- 店铺 -->
    <div class="store">
      <img src="../assets/店铺.png" alt="" />
    </div>
    <!-- 关于商品 -->
    <div class="about">
      <img
        v-if="goods.details1"
        :src="'http://127.0.0.1:3000' + `${goods.details1}`"
        alt=""
      />
      <img
        v-if="goods.details2"
        :src="'http://127.0.0.1:3000' + `${goods.details2}`"
        alt=""
      />
      <img
        v-if="goods.details3"
        :src="'http://127.0.0.1:3000' + `${goods.details3}`"
        alt=""
      />
      <img
        v-if="goods.details4"
        :src="'http://127.0.0.1:3000' + `${goods.details4}`"
        alt=""
      />
      <img
        v-if="goods.details5"
        :src="'http://127.0.0.1:3000' + `${goods.details5}`"
        alt=""
      />
      <img
        v-if="goods.details6"
        :src="'http://127.0.0.1:3000' + `${goods.details6}`"
        alt=""
      />
      <img
        v-if="goods.details7"
        :src="'http://127.0.0.1:3000' + `${goods.details7}`"
        alt=""
      />
      <img
        v-if="goods.details8"
        :src="'http://127.0.0.1:3000' + `${goods.details8}`"
        alt=""
      />
      <img src="../assets/关于商品.webp" alt="" />
      <img src="../assets/关于发票.webp" alt="" />
      <img src="../assets/关于退货.webp" alt="" />
      <img src="../assets/关于包装.webp" alt="" />
      <img src="../assets/关于品牌.webp" alt="" />
      <img src="../assets/预售公告.webp" alt="" />
      <img src="../assets/商标1.webp" alt="" />
      <img src="../assets/商标2.webp" alt="" />
      <img src="../assets/价格说明.png" alt="" />
    </div>
    <!-- 商品导航 -->
    <div class="bar">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="onClickButton('PLUS')"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickBuy"
        />
      </van-goods-action>
    </div>
    <!-- 加入购物车提示图片 -->
    <van-dialog
      v-model="goCartShow"
      title="添加成功，在购物车等亲~"
      show-cancel-button
      confirm-button-text="前往购物车"
      cancel-button-text="再看看"
      @confirm="confirm"
    >
      <img
        width="50%"
        :src="'http://127.0.0.1:3000' + `${goods.productphoto}`"
      />
    </van-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      current: 0,
      goods: [],
      h: "375px",
      show: false,
      show3: false,
      show4: false,
      buy: 1,
      count: 1,
      goCartShow: false,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    //初始化轮播图的高度
    initSwipeHeight() {
      //重新根据当前屏幕宽度计算轮播图容器的高度值
      let picw = 1430;
      let pich = 1430;
      let screenw = window.screen.width;
      let swipeh = Math.floor((pich * screenw) / picw) + "px";
      this.h = swipeh;
    },
    //
    showPopup1() {
      this.show = true;
    },
    showPopup3() {
      this.show3 = true;
    },
    showPopup3_1() {
      this.show3 = false;
    },
    showPopup4() {
      this.show4 = true;
    },
    showPopup4_1() {
      this.show4 = false;
    },
    // 商品导航
    onClickIcon() {
      this.$router.push("/cart");
    },
    //加入购车函数
    addToShopCar() {
      //拼接出一个要保存到vux中car数组里的商品对象
      var goodainfo = {
        id: this.goods.productid, //商品id
        count: this.count, //商品数量
        title:this.goods.producttitle,
        slogan:this.goods.productdesc,
        photo:this.goods.productphoto,
        price: this.goods.productprice, //商品价格
        selected: true, //是否被选中
      };
      //调用store中的mutations来将商品加入购物车
      this.$store.commit("addToCar",goodainfo );
    },
    //点击加入购物车按钮
    onClickButton(type) {
      //判断用户是否登录
      if (this.$store.state.islogin !== true) {
        this.$dialog
          .alert({
            message: "您还没有登录哦",
            theme: "round-button",
            confirmButtonText:'前往登陆'
          })
          .then(() => {
            // on close
            this.$router.push('/login')
          });
      } else {//登录以后 才可添加商品
        this.addToShopCar();
        this.$store.dispatch("setTotal", {
          type: type,
          price: Number(this.goods.productprice),
        });
        this.toSql();
        this.goCartShow = true;
      }
    },
    //将商品数据添加到数据库中
    toSql(){
      let userid = window.sessionStorage.getItem('id');
      axios.post('/into_user_cart',`pid=${this.goods.productid}&tprice=${this.goods.productprice}&num=${this.count}&userid=${userid}`).then((res)=>{
      })
    },
    
    //弹出框 点击确定按钮 前往购物车页面
    confirm() {
      this.$router.push("/cart");
    },
    //点击立即购买
    onClickBuy() {},
  },
  mounted() {
    this.initSwipeHeight();
    let id = this.$route.query.id;
    axios.get(`/product?id=${id}`).then((res) => {
      this.goods = res.data.results[id - 1];
    });
  },
};
</script>
<style scoped>
.app {
  background-color: rgb(226, 224, 224);
  font: helvetica;
  overflow-x: hidden;
}
.lunbo img {
  width: 100%;
}
.custom-indicator {
  color: white;
  font-size: 14px;
  height: 20px;
  width: 40px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  z-index: 100;
  right: 10px;
  top: 90%;
  border-radius: 14px;
  background-color: rgba(90, 89, 89, 0.5);
}
.back {
  font-size: 14px;
  height: 34px;
  width: 34px;
  text-align: center;
  position: absolute;
  z-index: 100;
  left: 10px;
  top: 10px;
  border-radius: 34px;
  background-color: rgba(26, 25, 25, 0.5);
}
.back img {
  width: 60%;
  position: relative;
  top: 7px;
  left: -1px;
}
.cart {
  font-size: 14px;
  height: 34px;
  width: 34px;
  text-align: center;
  position: absolute;
  z-index: 100;
  right: 10px;
  top: 10px;
  border-radius: 34px;
  background-color: rgba(26, 25, 25, 0.5);
}
.cart img {
  width: 75%;
  position: relative;
  top: 5px;
}
.evaluation,
.detail {
  margin: auto;
  width: 95%;
  margin-top: 10px;
  background-color: white;
  border-radius: 15px;
}
.detail::after {
  content: "";
  display: block;
  clear: both;
}
.price {
  height: 24px;
}
.price span {
  float: left;
  color: rgb(255, 80, 0);
}
.p1 {
  position: relative;
  top: 20px;
  left: 10px;
  font-size: 12px;
}
.p2 {
  position: relative;
  top: 13px;
  left: 10px;
  font-size: 24px;
}
.shop {
  width: 33px;
  height: 20px;
  line-height: 12px;
  border-radius: 10px;
  background-color: rgb(255, 0, 45);
  color: white;
  font-size: 12px;
  position: relative;
  top: 30px;
  left: 12px;
}
.market {
  color: #999;
  font-size: 14px;
  float: right;
  position: relative;
  top: 10px;
  right: 10px;
}
.title {
  text-align: left;
  margin: 40px 10px 20px 10px;
}
/*  */
.detail /deep/ .van-cell:nth-child(1) {
  border-radius: 15px 15px 0 0;
}
.detail /deep/ .van-cell:nth-child(4) {
  border-radius: 0px 0px 15px 15px;
}
.count {
  float: right;
  position: relative;
  bottom: 65px;
  right: 100px;
  text-align: left;
  font-size: 20px;
  color: rgb(255, 80, 0);
}
.countS2 {
  color: black;
  font-size: 14px;
}
/* 分割线 */
.xian {
  width: 95%;
  margin: auto;
  margin-top: -5px;
}
/* 购买数量 */
.buyBox {
  width: 100%;
  /* background-color: black; */
}
.buyBox::after {
  content: "";
  display: block;
  clear: both;
}
.buyBox span {
  float: left;
  position: relative;
  left: 10px;
}
.buyBox .counter {
  float: right;
  position: relative;
  left: 90px;
}
/* 保障 */
.securityBox {
  color: #999;
  height: 85%;
  position: relative;
}
.security {
  margin-top: 20px;
}
.security::after {
  content: "";
  display: block;
  clear: both;
}
.security img {
  float: left;
  position: relative;
  left: 10px;
  top: 3px;
}
.security span {
  float: left;
  position: relative;
  left: 20px;
  font-size: 14px;
}
.securityBox p {
  font-size: 12px;
}
.Btn2,
.Btn1 {
  width: 90%;
  height: 40px;
  border-radius: 20px;
  color: white;
  border: 0;
  background-image: linear-gradient(to right, #ff9000 0%, #ff5000 100%);
  position: absolute;
  bottom: 0px;
  left: 5%;
}
/* 产品参数 */
.parameter {
  text-align: left;
  color: #999;
  height: 85%;
  position: relative;
}
/* 评价 */
.baby_evaluation {
  display: flex;
  position: relative;
}
.baby_evaluation_1 span {
  display: inline-block;
  font-weight: 600;
  margin-top: 15px;
  margin-left: 10px;
}
.all {
  color: #ff5000;
  position: absolute;
  right: 10px;
  top: 15px;
}
.product_eva {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.product_eva div {
  border-radius: 10px;
  background-color: rgb(243, 156, 156, 0.5);
  padding: 0px 5px;
  margin-right: 3px;
  font-size: 14px;
}
.buyerTou {
  float: left;
  position: relative;
  top: 10px;
  left: 10px;
}
.buyer_name {
  text-align: left;
  position: relative;
  top: 15px;
  left: 19px;
}
.buyer_name span {
  height: 14px;
}
.buyer_time {
  text-align: left;
  position: relative;
  top: 20px;
  font-size: 14px;
  color: #999;
  left: 20px;
}
.buyer_text {
  margin-top: 30px;
  text-align: left;
  padding-left: 30px;
}
/* 店铺 */
.store {
  width: 90%;
  background-color: white;
  border-radius: 15px;
  margin: auto;
  padding: 10px;
}
.store img {
  width: 95%;
  overflow: hidden;
}
/* 关于商品 */
.about {
  margin-top: 20px;
  width: 100%;
  margin-bottom: 45px;
}
.about img {
  width: 100%;
}
.bar {
  width: 100%;
}
.app /deep/ .van-dialog__header{
  color: black;
  font-weight: 600;
  font-family: '微软雅黑';
}
</style>